<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<audio src="js/不再见.mp3" autoplay="autoplay"></audio>
	
	<body>
		<canvas id="myCanvas" width="1400" height="750"> </canvas>
		<script type="text/javascript">
			var numbers = [
				//		 0
				[
					[0, 0, 0, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 1, 1, 0],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 1, 1, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0, 0],
				],
				//			1
				[
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 1, 1, 1],
				],
				//			2
				[
					[0, 0, 1, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 1, 1],
				],
				//			3
				[
					[0, 1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 1, 1, 1, 1, 1, 0],
				],
				//			4
				[
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1, 0],
					[0, 0, 1, 1, 0, 1, 1, 0],
					[0, 1, 1, 0, 0, 1, 1, 0],
					[0, 1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 1, 1],
				],
				//			5
				[
					[0, 1, 1, 1, 1, 1, 1, 1],
					[0, 1, 1, 0, 0, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0, 0],
					[0, 1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 1, 1, 1, 1, 1, 0],
				],
				//			6
				[
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0, 0],
					[0, 1, 1, 0, 1, 1, 1, 0],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 1, 1, 1, 1, 1, 0],
				],
				//			7				
				[
					[0, 1, 1, 1, 1, 1, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0, 0],
					[0, 0, 0, 1, 1, 0, 0, 0],
					[0, 0, 0, 1, 1, 0, 0, 0],
					[0, 0, 0, 1, 1, 0, 0, 0],
				],
				//			8
				[
					[0, 0, 1, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 1, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 1, 1, 1, 1, 1, 0],
				],
				//			9
				[
					[0, 0, 1, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 0, 0, 1, 1],
					[0, 0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0],
				],
				
//				:
				[
					[0,0,0,0],
					[0,0,0,0],
					[0,1,1,0],
					[0,1,1,0],
					[0,0,0,0],
					[0,0,0,0],
					[0,1,1,0],
					[0,1,1,0],
					[0,0,0,0],
					[0,0,0,0],
					
				],
			];
			
//			画布画笔	
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			
			var text=[0,0,10,0,0,10,0,0];
//			创建图片对象
			var img=new Image();
			img.src="img/biao2.jpg";
			var date = new Date();	//打印的时间
			var date = new Date(); //aaaaaaaaa
			var balls=[];
			img.onload=function(){
//			ctx.drawImage(img,0,0);交换嵌套，
//			数组循环
			setInterval(function(){
//			清屏语句
				ctx.clearRect(0,0,canvas.width,canvas.height);
				ctx.drawImage(img,0,0);
				
//				获取时间
				var time=new Date();	//晚于打印时间33毫秒
				if(time.getSeconds()!=date.getSeconds()){
//						个位/十位变化
					var gw=date.getSeconds()%10;
//					var sw=parseInt(date.getSeconds()/10);
//					添加小球
					addBall(960,20,gw);
					var sw1=parseInt( date.getSeconds()/10);
					var sw2=parseInt( time.getSeconds()/10);
			
						if(sw1!=sw2){
							addBall(800,10,sw1);
						}
					
//					秒数变化
					date=time;
//					for (var i=0;i<50;i++) {}				
				}	
//					打印改变后尺寸
//						date.getHours();
				text[0]=parseInt( date.getHours()/10);
				text[1]=date.getHours()%10;
				text[3]=parseInt( date.getMinutes()/10);
				text[4]=date.getMinutes()%10;
				text[6]=parseInt( date.getSeconds()/10);
				text[7]=date.getSeconds()%10;
				
				for (var i=0;i<text.length;i++) {
					if(i==0||i==1){
						drawNumber(i*160+10, 10, text[i]);
					}
					if(i==2){
						drawNumber(i*160-10, 10, text[i]);
					}
					if(i==3||i==4){
						drawNumber(i*160-90, 10, text[i]);
					}
					if(i==5){
						drawNumber(i*160-110, 10, text[i]);
					}
					if(i==6||i==7){
						drawNumber(i*160-190, 10, text[i]);
					}				
				}
//			打印小球,
			drawBalls();
			},33);
		};
			
			function addBall(ball1x,ball1y,number){
					for (var i=0;i<numbers[number].length;i++) {
						var t1=i*20;
						for (var k=0;k<numbers[number][i].length;k++) {
							var l1=k*20;
							
							if(numbers[number][i][k]==1){
					//添加小球
					var vx=(Math.random()*5)+5;
					if(Math.random()>0.5){
						vx=-vx;
					}
					var vy=(Math.random()*10)+5;
					if(Math.random()>0.5){
						vy=-vy;
					}
					
					var r=parseInt(Math.random()*256);
					var g=parseInt(Math.random()*256);
					var b=parseInt(Math.random()*256);
					var a=Math.random();
					var color="rgba("+r+","+g+","+b+","+a+")"
//					x,y,R,vx,vy,color
					balls.push([ball1x+l1,ball1y+t1,8,vx,vy,color]);
							}
						}
					}	
					
			}
			
			
//			绘制掉落小球
			function drawBalls(){
				for (var i=0;i<balls.length;i++) {
					ctx.beginPath();
					ctx.fillStyle=balls[i][5];
					ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI)
					ctx.fill();
					balls[i][0]=balls[i][0]+balls[i][3];
					balls[i][1]=balls[i][1]+balls[i][4];
					balls[i][4]=balls[i][4]+5;
					
					if(balls[i][1]>canvas.height-balls[i][2]){
						balls[i][1]=canvas.height-balls[i][2];
						balls[i][4]=-balls[i][4]*0.7;
					}
				}
			}
			
//			绘制数字
			function drawNumber(arcX, arcY, num) {	
//				var r=parseInt(Math.random()*256);
//				var g=parseInt(Math.random()*256);
//				var b=parseInt(Math.random()*256);
				ctx.fillStyle = "white";
				var number1 = numbers[num];
				var R = 8;
				for(var i = 0; i < number1.length; i++) {
//					if(num==5){arcX=10;arcY=arcY+400}
					y = 2 * R * i + arcY;
					for(var k = 0; k < number1[i].length; k++) {
//						if(number1[i][k] == 0) {
//							ctx.fillStyle = "yellow";
//						}
						if(number1[i][k] == 1) {							
							x = 2* R * k + arcX;
							ctx.beginPath();
							ctx.arc(x, y, R, 0, 2 * Math.PI);
							ctx.fill();
						}					
					}
				}
			}
		</script>
	</body>

</html>